<template>
  <div class="container">
    <el-button
      @click="showAddDialog"
      size="mini"
    >
      <i class="el-icon-plus"></i>
      {{ $language.local("Add") }}
    </el-button>

    <el-dialog
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :title="$language.local('添加')"
      :visible.sync="addDialogVisible"
      width="62%"
    >
      <el-form
        :model="addForm"
        :rules="$rules"
        class="grid-flex"
        label-width="100px"
        ref="addFromRef"
      >
        <!-- @validate="onValidate" -->
        <template v-for="(value, key) in addForm">
          <el-form-item
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            v-if="key === 'BankName'"
          >
            <select-bank v-model="addForm[key]"></select-bank>
          </el-form-item>

          <el-form-item
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            v-else-if="/bankcard/i.test(key)"
          >
            <xy-number v-model="addForm[key]"></xy-number>
          </el-form-item>

          <el-form-item
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            v-else-if="key === 'Sex'"
          >
            <el-radio-group
              class="sex"
              size="mini"
              v-model="addForm[key]"
            >
              <el-radio
                border
                label="1"
              >
                <i class="el-icon-male"></i> 男
              </el-radio>
              <el-radio
                border
                label="2"
              >
                <i class="el-icon-female"></i>
                女
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            v-else-if="key === 'ServiceID'"
          >
            <select-service v-model="addForm[key]"></select-service>
          </el-form-item>

          <el-form-item
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            v-else-if="key === 'MID'"
          >
            <select-merchantid v-model="addForm[key]"></select-merchantid>
          </el-form-item>
          <el-form-item
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            v-else-if="key === 'ServiceContentId'"
          >
            <select-id
              apiName="/api/Common/GetdictionaryItem?typenum=002"
              label-key="name"
              v-model="addForm[key]"
            ></select-id>
          </el-form-item>

          <el-form-item
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            v-else
          >
            <xy-input
              clearable
              v-model="addForm[key]"
            ></xy-input>
          </el-form-item>
        </template>
      </el-form>

      <div
        class="dialog-footer"
        slot="footer"
      >
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button
          @click="onAddSubmit('addFromRef')"
          type="primary"
        >确 定</el-button>
      </div>
    </el-dialog>

    <!-- #endregion -->
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  props: {
    model: Object,
    apiName: String,
  },
  data() {
    return {
      addDialogVisible: false,
      addForm: this.model,
      banks: [],
    };
  },
  created() {},
  methods: {
    async showAddDialog() {
      this.addDialogVisible = true;
    },

    onAddSubmit(formName) {
      this.$refs[formName].validate(async (valided) => {
        if (!valided) {
          return;
        }

        // this.addForm.employee.empName = this.addForm.empName;
        console.log(this.addForm);
        let query = {
          MID: this.addForm.MID,
          ServiceContentId: this.addForm.ServiceContentId,
        };
        let response = await this.$http.post(
          `${this.apiName}`,
          this.addForm,
          query
        );
        console.log(response);
        if (response.data.Code == 200) {
          console.log(response);
          // this.$message.success("添加成功");
          this.addDialogVisible = false;
          this.reload();
        }

      });
    },
    onValidate(prop, isValided) {
      if (prop == "IdCardNo") {
        if (isValided) {
          let sex = this.addForm[prop].slice(16, 17);
          this.addForm.Sex = sex % 2 ? "1" : "2";
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
